まずは、表全体の飾り枠を画像編集ソフトで作成します。続いて、この画像をコーナーや縦横の枠線ごとに切り出し、個別の画像として保存します。この際に注意すべき点は、各画像の縦横のピクセル数を隣接する画像と一致させることです。ピクセル数が一致していない場合は、正しく表を作成できません。また、隣接する画像が上下左右にずれないように注意する必要もあります。 なお、画像編集が苦手な方は、ホームページで配布されているテーブル用の素材をダウンロードし、利用してもかまいません。このような素材は「テーブル素材」などをキーワードに検索すると発見できます。 ←表全体の飾り枠 ←表の上部を構成する画像。   ファイル名は「a1.jpg」〜「a5.jpg」。   ←表の左右を構成する画像。   ファイル名は「b1.jpg」、「b2.jpg」。     ←表の下部を構成する画像。   ファイル名は「c1.jpg」〜「c3.jpg」。

次は、「TABLE」タグを利用して先ほどの画像を配置した表を作成します。幅や高さが変更する画像は、background属性でセルの背景として配置します。サイズが変化しない画像は、「IMG」タグでセル内に直接画像を配置してもかまいません。また、必要に応じてwidthやheghtで行やセルの幅／高さを指定しておく必要があります。そのほか、「TABLE」タグには「border="0" cellspacing="0" cellpadding="0"」を記述し、枠線や余白を0に指定しておきます。 <TABLE border="0" cellspacing="0" cellpadding="0"> <TR height="54">   <TD width="32"><IMG src="a1.jpg" width="32" height="54" border="0"></TD>   <TD width="150" background="a2.jpg"></TD>   <TD width="32"><IMG src="a3.jpg" width="32" height="54" border="0"></TD>   <TD width="300" background="a4.jpg"></TD>   <TD width="32"><IMG src="a5.jpg" width="32" height="54" border="0"></TD> </TR> <TR height="150">   <TD width="32" background="b1.jpg"></TD>   <TD width="150"></TD>   <TD width="32"></TD>   <TD width="300"></TD>   <TD width="32" background="b2.jpg"></TD> </TR> <TR height="32">   <TD width="32"><IMG src="c1.jpg" width="32" height="32" border="0"></TD>   <TD width="150" background="c2.jpg"></TD>   <TD width="32" background="c2.jpg"></TD>   <TD width="300" background="c2.jpg"></TD>   <TD width="32"><IMG src="c3.jpg" width="32" height="32" border="0"></TD> </TR> </TABLE>

各画像を正しく配置できたらセルの結合を行い、セルの数を必要最低限にします。特に文章を入力するセルは、colspanやrowspanで必ず1つのセルに結合しなければいけません。なお、セルを結合する際は、それにあわせて幅や高さの指定を変更するのを忘れないでください。 <TABLE border="0" cellspacing="0" cellpadding="0"> <TR height="54">   <TD width="32"><IMG src="a1.jpg" width="32" height="54" border="0"></TD>   <TD width="150" background="a2.jpg"></TD>   <TD width="32"><IMG src="a3.jpg" width="32" height="54" border="0"></TD>   <TD width="300" background="a4.jpg"></TD>   <TD width="32"><IMG src="a5.jpg" width="32" height="54" border="0"></TD> </TR> <TR height="150">   <TD width="32" background="b1.jpg"></TD>   <TD width="482" colspan="3"></TD>   <TD width="32" background="b2.jpg"></TD> </TR> <TR height="32">   <TD width="32"><IMG src="c1.jpg" width="32" height="32" border="0"></TD>   <TD width="482" colspan="3" background="c2.jpg"></TD>   <TD width="32"><IMG src="c3.jpg" width="32" height="32" border="0"></TD> </TR> </TABLE>

最後に、セル内にタイトルや本文を記述すれば表が完成します。文字を入力した後は、幅や高さを再調整し、全体のバランスを整えてください。本文を入力するセル（今回の例では2行目）は高さの指定を解除し、ブラウザに高さを自動調整させると、上手く表を作成できます。 <TABLE border="0" cellspacing="0" cellpadding="0"> <TR height="54">   <TD width="32"><IMG src="a1.jpg" width="32" height="54" border="0"></TD>   <TD width="120" background="a2.jpg" align="center">     <FONT size="4" color="#FFFFFF"><B<飾りのある表</B></FONT<   </TD>   <TD width="32"><IMG src="a3.jpg" width="32" height="54" border="0"></TD>   <TD width="300" background="a4.jpg"></TD>   <TD width="32"><IMG src="a5.jpg" width="32" height="54" border="0"></TD> </TR> <TR>   <TD width="32" background="b1.jpg"></TD>   <TD width="452" colspan="3">     <FONT color="#FFFFFF">画像を利用して表を装飾すると、このようなデザインの文章ボックスを作成できます。ボックス（表）の幅や高さを変更した場合も、装飾用の画像はそのまま流用できます。工夫次第で面白い文章ボックスを作成できると思うので、いろいろと試してみてください。</FONT>   </TD>   <TD width="32" background="b2.jpg"></TD> </TR> <TR height="32">   <TD width="32"><IMG src="c1.jpg" width="32" height="32" border="0"></TD>   <TD width="452" colspan="3" background="c2.jpg"></TD>   <TD width="32"><IMG src="c3.jpg" width="32" height="32" border="0"></TD> </TR> </TABLE>

�e�����[�N����EC�i�r Yahoo �y�V LINE���f�[�^�����[�������z500�~�`�I
�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q�����@�C�O���s�����������I �C�O�z�e��